<template>
  <!-- 表格卡片 -->
  <a-card size="small" :bordered="false" :hoverable="true" :scroll="{ x: 1500 }">
    <a-row class="smart-table-btn-block">
      <div class="smart-table-operate-block">
        <a-row :gutter="24">
          <a-col :span="6">
<<<<<<< HEAD
            <a-button type="primary" @click="showModal('添加公告')">
              <PlusOutlined /> 点击添加公告
            </a-button></a-col>
          <a-col :span="10"> <a-input v-model:value="queryForm.key" placeholder="关键字查询" /></a-col>
          <a-col :span="4">
            <a-button type="primary" @click="getInitDateFind">
              <SearchOutlined />查询
            </a-button></a-col>
          <a-col :span="2">
            <a-button @click="getRemase">
              <ReloadOutlined />重置
            </a-button></a-col>
=======
            <a-button type="primary" @click="showModal('添加公告')"> <PlusOutlined /> 点击添加公告</a-button></a-col
          >
          <a-col :span="10"> <a-input v-model:value="queryForm.key" placeholder="关键字查询" /></a-col>
          <a-col :span="4">
            <a-button type="primary" @click="getInitDateFind"><SearchOutlined />查询</a-button></a-col
          >
          <a-col :span="2">
            <a-button @click="getRemase"><ReloadOutlined />重置</a-button></a-col
          >
>>>>>>> yx
        </a-row>
      </div>
      <div class="smart-table-setting-block">
        <TableOperator v-model="columns" :tableId="TABLE_ID_CONST.BUSINESS.OA.ENTERPRISE" :refresh="getInitDate" />
      </div>
    </a-row>
<<<<<<< HEAD
    <a-table size="small" :dataSource="tableData" :columns="columns" :row-key="(record) => record.blfinancprojectid"
      :pagination="false" :loading="tableLoading" bordered @change="handleTableChange">
=======
    <a-table
      size="small"
      :dataSource="tableData"
      :columns="columns"
      :row-key="(record) => record.blfinancprojectid"
      :pagination="false"
      :loading="tableLoading"
      bordered
      @change="handleTableChange"
    >
>>>>>>> yx
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.dataIndex === 'action'" title="操作">
          <div class="smart-table-operate">
            <a-space>
              <span style="color: #1890ff" @click="getViews(record)">点击预览</span>
              <span style="color: #9ac583" @click="getCurret(record)">设为当前</span>
              <a-popconfirm title="是否要删除此条申报?" ok-text="确定" cancel-text="取消" @confirm="confirm(record)">
                <span style="color: red">删除此条</span>
              </a-popconfirm>
              <span style="color: #1890ff" @click="showModal('编辑公告', record)">编辑</span>
            </a-space>
          </div>
        </template>
        <template v-if="column.dataIndex === 'blstate'" title="公告状态">
          <div class="smart-table-operate">
            <span v-if="record.blstate == 0">未展示</span>
            <span style="color: red" v-else-if="record.blstate == 1">公告中</span>
          </div>
        </template>
      </template>
    </a-table>
    <!-- 分页-->
    <div class="smart-query-table-page">
<<<<<<< HEAD
      <a-pagination showSizeChanger showQuickJumper show-less-items :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="queryForm.limit" v-model:current="queryForm.page" v-model:pageSize="queryForm.limit"
        :total="total" @change="getInitDate" @showSizeChange="getInitDate" :show-total="(total) => `共${total}条`" />
=======
      <a-pagination
        showSizeChanger
        showQuickJumper
        show-less-items
        :pageSizeOptions="PAGE_SIZE_OPTIONS"
        :defaultPageSize="queryForm.limit"
        v-model:current="queryForm.page"
        v-model:pageSize="queryForm.limit"
        :total="total"
        @change="getInitDate"
        @showSizeChange="getInitDate"
        :show-total="(total) => `共${total}条`"
      />
>>>>>>> yx
    </div>
  </a-card>
  <!-- 添加公告 -->
  <a-modal v-model:open="open" :title="title" @ok="handleOk" @change="cancel" width="600px">
    <a-form :model="formState" name="basic" ref="formRef">
      <a-form-item label="公告标题" name="bltitle" :rules="[{ required: true, message: '请填写公告标题' }]">
        <a-input v-model:value="formState.bltitle" placeholder="请填写公告标题" />
      </a-form-item>
      <a-form-item label="公告内容" name="blcontent" :rules="[{ required: true, message: '请填写公告内容' }]">
        <a-textarea v-model:value="formState.blcontent" placeholder="请填写公告内容" :rows="4" />
      </a-form-item>
    </a-form>
  </a-modal>
  <!-- 预览 -->
  <a-modal v-model:open="openView" width="100%" wrap-class-name="full-modal">
    <div class="text">
      <h3>{{ ViewsFrom.bltitle }}</h3>
      <div class="blcontent">
        {{ ViewsFrom.blcontent }}
      </div>
    </div>
    <template #footer>
      <a-button key="back" @click="openView = false">关闭</a-button>
    </template>
  </a-modal>
</template>
<script setup>
  import { reactive, ref, onMounted, defineEmits, toRaw } from 'vue';
  import { message, Modal } from 'ant-design-vue';
  import { SmartLoading } from '/@/components/framework/smart-loading';
  import { PAGE_SIZE, PAGE_SIZE_OPTIONS } from '/@/constants/common-const';
  import TableOperator from '/@/components/support/table-operator/index.vue';
  import { TABLE_ID_CONST } from '/@/constants/support/table-id-const';
  import { smartSentry } from '/@/lib/smart-sentry';
  import { AnnualandAments } from '../../api/AnnualandAments/AnnualandAments';
  //--------------------------- 表格 列 ---------------------------
  const columns = ref([
    {
      title: '公告标题',
      dataIndex: 'bltitle',
      align: 'center',
<<<<<<< HEAD
      width: 150,
=======
>>>>>>> yx
    },
    {
      title: '公告内容',
      dataIndex: 'blcontent',
      align: 'center',
<<<<<<< HEAD
=======
      width: 1000,
>>>>>>> yx
    },
    {
      title: '公告状态',
      dataIndex: 'blstate',
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'bldate',
      align: 'center',
      sorter: (a, b) => {
        let aTimeString = a.bldate;
        let bTimeString = b.bldate;
        aTimeString = aTimeString.replace(/-/g, '/');
        bTimeString = bTimeString.replace(/-/g, '/');
        let aTime = new Date(aTimeString).getTime();
        let bTime = new Date(bTimeString).getTime();
        return bTime - aTime;
      },
    },
    {
      title: '操作',
      dataIndex: 'action',
      align: 'center',
    },
  ]);
  const queryFormState = {
    page: 1,
    limit: PAGE_SIZE,
  };
  const queryForm = reactive({ ...queryFormState });
  const tableLoading = ref(false);
  const tableData = ref([]);
  const total = ref(0);
  // 表格初始化
  function getInitDateFind() {
    message.success('查询成功');
    getInitDate();
  }
  //表格初始化
  async function getInitDate() {
    try {
      let res = await AnnualandAments.menText(queryForm);
      tableData.value = res.page.list;
      total.value = res.page.totalCount;
    } catch (error) {
      smartSentry.captureError(error);
    }
  }
  //添加公告
  let formState = ref({});
  const formRef = ref();
  const open = ref(false);
  const title = ref('');
  const showModal = (name, record) => {
    title.value = name;
    open.value = true;
    if (name == '编辑公告') {
      formState.value = { ...record };
    }
  };
  const handleOk = (e) => {
    onSubmit();
  };
  //添加
  const onSubmit = () => {
    formRef.value
      .validate()
      .then(() => {
        console.log('values', formState, toRaw(formState.value));
        if (title.value == '编辑公告') {
          AnnualandAments.GongGaoApi(toRaw(formState.value)).then((res) => {
            message.success('编辑成功');
            open.value = false;
            formRef.value.resetFields();
            getInitDate();
            formState.value = {};
          });
        } else {
          AnnualandAments.menTextAdd(toRaw(formState.value))
            .then((res) => {
              message.success('添加成功');
              open.value = false;
              formRef.value.resetFields();
              getInitDate();
              formState.value = {};
            })
            .catch((error) => {
              smartSentry.captureError(error);
            });
        }
      })
      .catch((error) => {
        message.warning('表单有未填项');
      });
  };
  //删除
  const confirm = async (record) => {
    try {
      let list = [record.blannouncementid];
      let res = await AnnualandAments.menTextDelete(list);
      const totalPage = Math.ceil((total.value - 1) / PAGE_SIZE);
      console.log('totalPage:', totalPage);
      const currentPage = queryForm.page > totalPage ? totalPage : queryForm.page;
      queryForm.page = currentPage < 1 ? 1 : currentPage;
      message.success('删除成功');
      getInitDate();
    } catch (error) {
      smartSentry.captureError(error);
    }
  };
  //设置为当前
  const getCurret = async (record) => {
    try {
      let obj = {
        blannouncementid: record.blannouncementid,
        blstate: 1,
      };
      let res = await AnnualandAments.menTextCurrent(obj);
      message.success('设置成功');
      getInitDate();
    } catch (error) {
      smartSentry.captureError(error);
    }
  };
  //预览
  const openView = ref(false);
  const ViewsFrom = ref();
  const getViews = (record) => {
    openView.value = true;
    ViewsFrom.value = record;
  };
  const cancel = () => {
    open.value = false;
    formRef.value.resetFields();
    formState.value = {};
  };
  //重置
  function getRemase() {
    message.success('重置成功');
    queryForm.key = '';
    getInitDate();
  }
  onMounted(() => {
    getInitDate();
  });
</script>

<style lang="scss">
  .text h3 {
    text-align: center;
    font-weight: 700;
    padding: 5px;
    font-size: 24px;
  }
<<<<<<< HEAD

=======
>>>>>>> yx
  .text .blcontent {
    font-size: 18px;
    font-family: '宋体';
    line-height: 35px;
    text-indent: 2em;
  }
<<<<<<< HEAD

=======
>>>>>>> yx
  .full-modal {
    .ant-modal {
      max-width: 100%;
      top: 0;
      padding-bottom: 0;
      margin: 0;
    }
<<<<<<< HEAD

=======
>>>>>>> yx
    .ant-modal-content {
      display: flex;
      flex-direction: column;
      height: calc(100vh);
    }
<<<<<<< HEAD

=======
>>>>>>> yx
    .ant-modal-body {
      flex: 1;
    }
  }
</style>
<<<<<<< HEAD


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>
=======
>>>>>>> yx
